<template>
  <div style="height:460px;position: relative;">
    <IEcharts v-if="option.series[0].data.length!==0"
              :option="option" />
    <div style="text-align:center"
         v-else>
      <p><b style="font-size:18px;">不满意件类别统计</b></p>
      <p style="margin-top:60px;">暂无数据</p>
    </div>
  </div>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.js'
import _ from 'lodash'

let echarData = []
// let _strMax = _.max(echarData.map(item => item.name.length))
export default {
  components: {
    IEcharts,
  },
  props: {
    dateItem: {
      type: String,
      default: '',
    },
    dateList: {
      type: Array,
      default: [],
    },
  },
  watch: {
    dateItem: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue) {
            // console.log('cao1')
            this.dateType = 'i'
            this.getData()
          }
        }
      },
      deep: true,
    },
    dateList: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue.length !== 0) {
            this.dateType = 'd'
            this.getData()
            // console.log('cao2')
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      dateType: 'i',
      option: {
        title: {
          text: '不满意件类别统计',
          x: 'center',
        },
        color: [
          '#37a2da',
          '#32c5e9',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293',
          '#e7bcf3',
          '#8378ea',
        ],
        grid: {
          left: '20%',
          right: '25%',
          top: '200px',
          bottom: '50px',
          containLabel: false,
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '20%',
          top: 'center',
          itemGap: 20,
          selectedMode: true,
          icon: 'pin',
          formatter: (name) => {
            let _str = ''
            echarData.forEach((item) => {
              if (name === item.name) {
                _str = '{name|' + item.name + '：}{value|' + item.value + '}'
              }
            })
            return _str
          },
          textStyle: {
            rich: {
              name: {
                fontSize: 16,
                width: '',
                align: 'left',
              },
              value: {
                width: 80,
                align: 'right',
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333333',
              },
            },
          },
        },
        series: [
          {
            name: '业务警种',
            type: 'pie',
            radius: [110, 150],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            data: [],
            label: {
              show: false,
              position: 'center',
            },
          },
        ],
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      let cont = {
        dateItem: this.dateItem,
        dateList: this.dateList,
        dateType: this.dateType,
      }
      this.$axios
        .post(this.$api.countCharts.satisfactionCategoryCharts, cont)
        .then((res) => {
          if (res) {
            console.log(res, 6666)
            this.option.series[0].data = res.category.map((item) => {
              return { name: item.name, value: item.value }
            })
            echarData = this.option.series[0].data
            let _strMax = _.max(echarData.map((item) => item.name.length))
            this.option.legend.textStyle.rich.name.width = _strMax * 15
          }
        })
    },
  },
}
</script>

<style>
</style>
